<template>
  <div class="drag_box">
    <div id="drag">
        <div class="drag_bg weui-btn_primary" :style="{width:curW+'px'}"></div>
        <div class="drag_text" onselectstart="return false;" unselectable="on":class="[isDragOk ? 'whitecolor':'']">{{text}}</div>
        <div :id="markId" class="handler" :style="{left:(curW-1)+'px'}" :class="[isDragOk ? 'handler_ok_bg':'handler_bg']"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "slider",
  props: {},
  data() {
    return {
      curW: 0,
      isMove: false, //是否在运动
      isDragOk: false, //是否拖动成功
      maxWidth: 0, //拖动的最大宽度
      element: {},
      text: "拖动滑块验证",
      currentPos: {
        x: 0,
        y: 0
      }
    };
  },
  props:['markId'],
  created() {
  },
  mounted() {
    var self = this;
    this.element = document.querySelector("#"+this.markId);
    this.getMaxWidth();
    window.addEventListener("resize", function() {
      self.getMaxWidth();
    });
    window.addEventListener("orientationchange", function() {
      self.getMaxWidth();
    });
    this.element.addEventListener("touchstart", self.touchstartFun, false);
    document
      .querySelector("body")
      .addEventListener("touchmove", self.touchmoveFun, false);
    document
      .querySelector("body")
      .addEventListener("touchend", self.touchendFun, false);

    this.element.addEventListener("mousedown", self.touchstartFun, false);
    document
      .querySelector("body")
      .addEventListener("mousemove", self.touchmoveFun, false);
    document
      .querySelector("body")
      .addEventListener("mouseup", self.touchendFun, false);

    (function drawAnimate() {
      if (self.curW <= self.maxWidth) {
        window.requestAnimationFrame(drawAnimate, 1000 / 60);
        self.curW = self.currentPos.x;
      } else {
        self.curW = self.currentPos.x = self.maxWidth;
      }
    })();
  },
  watch: {},
  methods: {
    touchstartFun(e) {
      if (this.isDragOk) {
        e.preventDefault();
        return;
      }
      this.isMove = true;
      this.curW = this.currentPos.x = this.getCurrentPosition(e).x;
    },
    touchmoveFun(e) {
      if (this.isMove && this.curW > 0 && this.curW < this.maxWidth) {
        this.currentPos.x = this.getCurrentPosition(e).x;
      } else if (this.isMove && this.curW >= this.maxWidth) {
        this.curW = this.currentPos.x = this.maxWidth;
        this.isDragOk = true;
        this.text = "验证通过";
        this.$emit('drag-ok');
      }
    },
    touchendFun(e) {
      this.isMove = false;
      if (this.curW < this.maxWidth) {
        this.curW = this.currentPos.x = 0;
      }
    },

    getCurrentPosition(event) {
      var xPos, yPos, rect;
      rect = document.getElementById("drag").getBoundingClientRect();
      //event = event.originalEvent;
      //判断是touch，还是鼠标事件
      if (event.type.indexOf("touch") !== -1) {
        xPos = event.touches[0].clientX - rect.left;
        yPos = event.touches[0].clientY - rect.top;
      } else {
        //鼠标事件
        xPos = event.clientX - rect.left;
        yPos = event.clientY - rect.top;
      }
      return {
        x: xPos,
        y: yPos
      };
    },
    getMaxWidth() {
      this.maxWidth =
        document.querySelector("#drag").clientWidth -
        document.querySelector("#"+this.markId).scrollWidth;
    }
  }
};
</script>

<style scoped>
.drag_box{
  padding: 0 2rem;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#drag {
  position: relative;
  background-color: #e8e8e8;
  width: 100%;
  height: 42px;
  line-height: 42px;
  text-align: center;
  border-radius: 4px;
}
#drag .drag_bg {
  background: #7ac23c;
  height: 42px;
  width: 0;
  border-radius: 4px 0 0 4px;
  
}
#drag .drag_text {
  position: absolute;
  top: 0px;
  width: 100%;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
}
.drag_text.whitecolor {
  color: #fff;
}
#drag .handler {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 40px;
  height: 40px;
  border: 1px solid #ccc;
  cursor: move;
}
.handler_bg {
  background: #fff
  url("")
  no-repeat center;
  border-radius: 4px; 
}
.handler_ok_bg {
  background: #fff
  url("")
  no-repeat center;
  border-radius: 0 4px 4px 0;
}
</style>